<template>
  <div>
    <!-- 这里放置发票照片分析检测的组件内容 -->
    <h2>发票照片分析检测</h2>
    <div>
      <input type="file" @change="handleFileUpload" accept="image/*" class="file-input" style="display: none;" id="fileInput" />
      <label for="fileInput" class="file-input-label">选择文件</label>
      <!-- 添加发票分块识别按钮 -->
      <button @click="blockRecognition" class="recognition-button">发票分块识别与文字提取</button>
      <!-- 添加发票文字识别按钮
      <button @click="textRecognition" class="recognition-button">发票文字识别</button> -->
      <!-- 添加存入数据库按钮 -->
      <button @click="saveToDatabase" class="database-button">存入数据库</button>
    </div>
    <div v-if="imageUrl || yoloResultImageUrl" class="image-container">
      <div v-if="imageUrl" class="image-item">
        <img :src="imageUrl" alt="Uploaded Invoice" class="uploaded-image" />
        <textarea class="resizable-textarea" placeholder="文字识别显示" v-model="orcResultWord"></textarea>
        <!-- <p class="file-path">{{ filePath }}</p> 添加文件路径显示 -->
      </div>
      <div v-if="yoloResultImageUrl" class="image-item">
        <img :src="yoloResultImageUrl" alt="YOLO Result Image" class="yolo-result-image" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; // 引入axios库

export default {
  name: 'InvoicePhotoAnalysis',
  data() {
    return {
      imageUrl: '',
      filePath: '', // 添加文件路径数据属性
      yoloResultImageUrl: '',
      orcResultWord: '' // 添加orcResultWord数据属性
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        // 处理文件上传逻辑
        console.log('上传的文件:', file);
        this.imageUrl = URL.createObjectURL(file);
        this.filePath = file.name; // 设置文件路径
      }
    },
    showHistory() {
      // 处理显示历史记录逻辑
      console.log('显示历史记录');
    },
    blockRecognition() {
      console.log('发票分块识别');
      // 这里可以添加具体的逻辑

      // 创建FormData对象
      const formData = new FormData();
      formData.append('file', document.getElementById('fileInput').files[0]);

      // 发送文件到后端
      axios.post('http://127.0.0.1:5000/api/data', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log('文件上传成功:', response.data);
        // this.yoloResultImageUrl = response.data.yolo_result_img;
        const imageName = response.data.yolo_result_img.split('/').pop();
        // 构造通过Flask路由访问的路径
        this.yoloResultImageUrl = `http://localhost:5000/images/${imageName}`;

        // 假设后端返回的数据中包含orc_result_word字段，且是一个数组
        const ocrResultArray = response.data.ocr_result_word;
        // 将数组转换为字符串，你可以根据需要选择合适的拼接方式，这里使用换行符连接
        const ocrResultString = ocrResultArray.join('\n');
        this.orcResultWord = ocrResultString;
      })
      .catch(error => {
        console.error('文件上传失败:', error);
      });
    },
    // textRecognition() {
    //   console.log('发票文字识别');

    // then(response => {
    //     console.log('文件上传成功:', response.data);
    //     // 假设后端返回的数据中包含orc_result_word字段，且是一个数组
    //     const ocrResultArray = response.data.ocr_result_word;
    //     // 将数组转换为字符串，你可以根据需要选择合适的拼接方式，这里使用换行符连接
    //     const ocrResultString = ocrResultArray.join('\n');
    //     this.orcResultWord = ocrResultString;
    //   })
    // .catch(error => {
    //     console.error('文件上传失败:', error);
    //   });
    // },
    saveToDatabase() {
      console.log('存入数据库');
       // 创建一个对象来存储需要发送的数据
       const dataToSend = {
        orcResultWord: this.orcResultWord
      };

      // 发送数据到后端
      axios.post('http://127.0.0.1:5000/api/save', dataToSend)
      .then(response => {
        console.log('数据保存成功:', response.data);
      })
      .catch(error => {
        console.error('数据保存失败:', error);
      });
    }
  }
}
</script>

<style scoped>
/* 这里放置发票照片分析检测的组件样式 */
.history-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

.history-button:hover {
  background-color: #0056b3;
}

.recognition-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

.database-button {
  background-color: #71b9e5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

.recognition-button:hover {
  background-color: #218838;
}

.uploaded-image {
  max-width: 100%;
  max-height: 300px; /* 调整图片最大高度 */
  margin-top: 20px;
}

.file-input-label {
  display: inline-block;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.file-input-label:hover {
  background-color: #0056b3;
}

.file-path {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.yolo-result-image {
  max-width: 100%;
  max-height: 300px;
  margin-top: 20px;
}

.image-container {
  display: flex;
  align-items: flex-start;
}

.image-item {
  margin-right: 20px; 
}

.resizable-textarea {
  width: 200%;
  min-height: 100px;
  margin-top: 10px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}
</style>